<script lang="ts">
/**
 * @author wyr
 * @description #19518 【组件】视频table列表
 * @param {string[]} data - 表格数据 DataType类型
 * @slot firstColumn 首列
 * @slot handle 尾列=
 * @event on-select 选中
 * @event on-select-all 全选
 * @event on-download-file 下载
 */

import {
  Vue,
  Component,
  Prop,
  Emit,
  Watch,
  Mixins
} from "vue-property-decorator";
import TableMix from "@/views/mixins/TableMix";

export interface DataType {
  id: number;
  name: number; // 视频图片
  url: string; // 大小
  create_time: string; // 上传时间
  create_user_name: string; // 播放次数
  size: number; // 状态
}

@Component
export default class OtherTable extends Mixins(TableMix) {
  @Prop() public data!: DataType[];
  @Prop() public loading!: boolean;

  public onClickVideo(item: any) {
    this.$emit("on-click-video", item);
  }

  public selectionChange(item: any) {
    this.$emit("on-select", item);
  }

  public selectAllChange(item: any) {
    this.$emit("on-select-all", item);
  }
}
</script>

<template>
  <el-table
    class="other-table"
    v-bind="$attrs"
    v-loading="loading"
    :ref="refName"
    :data="data"
    :size="componentsSize"
    :empty-text="emptyText"
    @select="selectionChange"
    @select-all="selectAllChange"
    style="width: 100%"
  >
    <slot name="firstColumn"></slot>
    <el-table-column label="文件名称" min-width="240">
      <template slot-scope="{ row }">
        <a
          class="feok-link"
          :href="row.url"
          @click="$emit('on-download-file', row)"
        >{{ $ph(row.name) }}</a>
      </template>
    </el-table-column>
    <el-table-column label="文件大小" min-width="120">
      <template slot-scope="{ row }">{{ (row.size / 1024 / 1024).toFixed(4) }} M</template>
    </el-table-column>
    <el-table-column prop="size" label="创建人" min-width="120">
      <template slot-scope="{ row }">{{ $ph(row.create_user_name) }}</template>
    </el-table-column>
    <el-table-column prop="time" label="创建时间" min-width="120">
      <template slot-scope="{ row }">{{ $ph(row.create_time) }}</template>
    </el-table-column>
    <slot name="handle"></slot>
  </el-table>
</template>

<style lang="less"></style>
